<template>
	<view class="ticket-holder">
		<view class="list">
			<view>
				<!-- @click="goQrcode(item)" -->
				<view class="card-pack-item pr"
					:style="{ backgroundImage: `url(${assetsPath}${data.inventory === 0 ? 'dd094419c06505ea3edb73a2cfdbe59a19fb8051' : '5f02c7ef74bbed9aa39718a8e173dbdbaf59d2c8'}.png)` }">
					<view class="flex-align">
						<!-- <u-image :src="item.venue_thumb" width="56rpx" height="56rpx" shape="square"></u-image> -->
						<u-image :src="`${assetsPath}f0d9a5af94d5830bf6b6e97ce69eddd62415923d.png`" width="30rpx"
							height="30rpx" shape="square"></u-image>
						<view style="margin-left: 13rpx;">{{ data.venue_name }}</view>
					</view>
					<view>
						<navigator
							:url="`/pages/personal/qrcode/qrcode?goods_name=${data.goods_name}&ticketno=${data.ticket_no}&title=我的票包&choose=选择票&goods_image=${data.goods_image}`"
							v-if="currentTab === 0"
							style="width: 100rpx; height: 100rpx;margin-left: 88%;margin-top: -70rpx;">
							<view class="qrcode">
								<u-image :src="`${assetsPath}471fbc0270836819ce3cf990613a3592d1bf581b.png`"
									width="52rpx" height="52rpx"></u-image>
							</view>
						</navigator>

						<view @click="$emit('click')">
							<!-- <view class="flex-between" style="margin: 0rpx 0 30rpx;">
							<view style=" width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: #97b717 ;font-size: 26rpx;text-align: center;line-height: 40rpx;" ><text>预约</text> </view>
							<view class="name">{{ data.goods_name }}</view>
						</view> -->
							<view class="flex-align">
								<view
									style=" width: 100rpx; height: 40rpx;background-color: aliceblue;border-radius:10rpx;color: #ffaa00 ;font-size: 26rpx;text-align: center;line-height: 40rpx;"
									v-if="data.inventory === 0"><text>预约</text> </view>
								<view class="name">{{ data.goods_name }}</view>
							</view>
							<view class="flex-align">
								<view class="name" style="margin-top: 20rpx;">no.{{ data.ticket_no }}</view>
							</view>
							<!-- <view class="name"v-if="data.inventory === 0" >有效期{{ data.sku_info }}</view> -->
							<view class="flex-between bottom">
								<!-- <view v-if="data.yxq != '长期有效'">
								{{data.days}}次
							</view>
							<view v-else>
								
							</view> -->
								<view>
									{{data.days}}次
								</view>
								<!-- <view class="date" v-if="data.specify == null">有效期至{{ addDate(data.starttime, data.days) }}</view> -->
								<!-- <view class="date" v-if="data.inventory === 0" >有效期{{ data.sku_info }}</view> -->
								<view class="date" v-if="data.is_yxq == null && data.inventory == 1">长期有效</view>
								<view class="date" v-else>{{ data.yxq }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const person = require("@/api/personal/index.js");
	export default {
		props: {
			data: {
				type: Object,
				required: true
			},
			lapse: Boolean
		},
		data() {
			return {
				assetsPath: this.$https.assetsPath,


			};
		},

		methods: {

		},
	};
</script>

<style lang="scss" scoped>
	.ticket-holder {
		padding-bottom: env(safe-area-inset-bottom);
		background-color: rgb(249, 249, 249);
		min-height: 100vh;

		/deep/.u-tabs {
			background-color: #fff;
			border-bottom: 1px solid #e5e5e5;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}

		.list {
			padding: 30rpx;
		}

		card-pack-item+card-pack-item {
			.card-pack-item {
				margin-top: 30rpx;
			}
		}

		.card-pack-item {
			color: #fff;
			width: 690rpx;
			height: 296rpx;
			padding: 18rpx 30rpx 50rpx 18rpx;
			background-position: left top;
			background-repeat: no-repeat;
			background-size: 100% 100%;

			&+.card-pack-item {
				margin-top: 30rpx;
			}

			&.lapse {

				.bottom,
				.balance {
					color: #fff !important;
				}
			}

			.number {
				text {
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.name {
				font-size: 32rpx;
				padding-left: 15rpx;
				margin-top: 25rpx;
			}

			.bottom {
				color: #fff !important;
				font-size: 28rpx;
				padding-top: 45rpx;

				.balance {
					font-size: 48rpx;
					color: #fff !important;
					margin-right: 10rpx;
					font-weight: bold;
				}
			}

			.qrcode {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
			}
		}



		.item {
			padding: 20rpx 30rpx;
			position: relative;
			height: 290rpx;
			background-color: #2f75fa;
			// filter: drop-shadow(0px 13rpx 57rpx rgba(8,73,162,0.11));
			border-radius: 20rpx;

			&+.item {
				margin-top: 30rpx;
			}

			&::after,
			&::before {
				content: "";
				position: absolute;
				top: 192rpx;
				border-radius: 50%;
				background-color: rgb(249, 249, 249);
				width: 30rpx;
				height: 30rpx;
				z-index: 1;
			}

			&::after {
				left: -15rpx;
			}

			&::before {
				right: -15rpx;
			}

			.line {
				top: 207rpx;
				left: 0;
				border-top: 1rpx dashed #fff;
				width: 100%;
			}

			.name {
				font-size: 40rpx;
				font-weight: bold;
				margin: 10rpx 0;
				color: #fff;

				.ticketName {
					width: 611rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.round {
					width: 20rpx;
					height: 20rpx;
					margin-right: 11rpx;
					background-color: rgb(47, 117, 250);
					border-radius: 50%;
				}
			}

			.minute {
				line-height: 34rpx;
				font-size: 26rpx;
				color: #fff;

				text {
					font-size: 44rpx;
				}
			}

			.expiration {
				font-size: 28rpx;
				color: #fff;
			}

			.bottom {
				font-size: 28rpx;
				margin-top: 40rpx;
				color: rgb(153, 153, 153);
			}

			.qrcode {
				right: 10rpx;
				top: 10rpx;
			}
		}


	}

	.disbled-ticket {
		// opacity: 0.6;
	}
</style>